<template>
  <div class="page adaofu-friend">
    <div class="container" :style="bg">
      <div class="tips">
        <p>TIPS：邀请好友成功开店后，好友将成为你的店铺合伙人，每日除自己店铺的盈利外，可额外获得该好友店铺盈利的5%。</p>
      </div>
      <div class="list">
        <div class="list-container" v-if="childrenList.length > 0">
          <div class="list-item" v-for="(item, i) in childrenList" :key="i">
            <div class="avatar">
              <img :src="item.headimgurl"/>
            </div>
            <div class="detail">
              <div class="name">{{item.nickname}}</div>
              <div class="count">昨日盈利：<span class="red">{{item.flowers}}</span></div>
            </div>
          </div>
        </div>
        <div class="empty-tips" v-if="showEmptyTips">暂无店铺合伙人收益</div>
      </div>
      <div class="operate">
        <div class="add">
          <button open-type="share">
            <div class="add-icon" :style="add"></div>
          </button>
        </div>
        <div class="win-btn" :style="btnBg" @click="reapChildrenFlowers">领取收益</div>
      </div>
    </div>
  </div>
</template>

<script>
import { sourceDomain } from '@/utils/constant'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
  },
  data () {
    return {
      icons: {
        bg: `${sourceDomain}/bg8.png`,
        add: `${require('static/images/friend/add.png')}`,
        btnBg: `${require('static/images/friend/btn-bg.png')}`
      },
      childrenList: [],
      playerId: '',
      showEmptyTips: false
    }
  },
  computed: {
    bg () {
      return `background-image: url(${this.icons.bg});`
    },
    add () {
      return `background-image: url(${this.icons.add});`
    },
    btnBg () {
      return `background-image: url(${this.icons.btnBg});`
    },
  },
  mounted () {
    this.resetData()
    this.getChildrenFlowers()
  },
  methods: {
    /**
     * 获取下属列表
     */
    async getChildrenFlowers () {
      const ret = await this.$store.dispatch('getChildrenFlowers', {
        page: 1,
        rows: 30
      })
      this.childrenList = ret.data || []
      this.playerId = ret.account.player_id
      this.showEmptyTips = this.childrenList.length === 0
    },
    /**
     * 领取下属收益
     */
    async reapChildrenFlowers () {
      if (this.childrenList.length > 0) {
        const ret = await this.$store.dispatch('reapChildrenFlowers')
        if (ret.data) {
          wx.showModal({
            title: '提示',
            content: '领取收益成功！',
            confirmText: '确认',
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                // 清空列表
                this.childrenList = []
              }
            }
          })
        }
      } else {
        wx.showModal({
          title: '提示',
          content: '暂无店铺合伙人收益',
          confirmText: '确认',
          showCancel: false,
          success: (res) => {
            if (res.confirm) {}
          }
        })
      }
    }
  },
  onShareAppMessage () {
    return {
      title: '免费送你一瓶阿道夫洗发水，赶快来领取吧！',
      path: `/pages/index/main?playerId=${this.playerId}&parentId=${this.playerId}`
    }
  }
}
</script>

<style lang="less" scoped>
.adaofu-friend {
  .container {
    position: relative;
    min-height: 100%;
    min-height: 100vh;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .tips {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -566rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    p {
      width: 520rpx;
      color: #3f2311;
      font-size: 26rpx;
    }
  }
  .empty-tips {
    color: #999;
    font-size: 27rpx;
    text-align: center;
    padding-top: 30rpx;
  }
  .list {
    position: absolute;
    top: 50%;
    margin-top: -328rpx;
    width: 100%;
    &-container {
      width: 486rpx;
      height: 624rpx;
      overflow: scroll;
      margin: 0 auto;
    }
    &-item {
      display: flex;
      align-items: center;
      border-bottom: 3rpx dashed #3f2311;
      padding: 17rpx 0 10rpx;
      .avatar {
        width: 90rpx;
        height: 90rpx;
        background-color: #b5b5b5;
        border-radius: 5rpx;
        img {
          display: block;
          width: 90rpx;
          height: 90rpx;
        }
      }
      .detail {
        margin-left: 12rpx;
        .name {
          font-size: 26rpx;
          color: #3f2311;
        }
        .count {
          font-size: 24rpx;
          color: #3f2311;
          padding-top: 14rpx;
          .red {
            color: #e24040;
          }
        }
      }
    }
  }
  .operate {
    .add {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 327rpx;
      margin-left: -21rpx;
      &-icon {
        width: 42rpx;
        height: 43rpx;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
      button {
        padding: 0;
        line-height: 1.0;
        background-color: transparent;
        &::after {
          display: none;
        }
      }
    }
    .win-btn {
      width: 153rpx;
      height: 62rpx;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      color: #fff;
      font-size: 27rpx;
      line-height: 62rpx;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 394rpx;
      margin-left: -77rpx;
    }
  }
}
</style>
